<template>
  <div class="vertical">
    <waveSufer :srcUrl="srcUrl" :wavesurferId="flagId" :isAutoPlay="isAutoPlay" ref="waveSuferRef" :showListen="showListen" :showDowload="showDowload"></waveSufer>
  </div>
</template>
<script lang='ts'>
import waveSufer from './waveSufer.vue'
import { Component, Prop, Vue, Ref } from 'vue-property-decorator'

@Component({
  components: {
    waveSufer
  }
})

export default class Audio extends Vue {
  @Ref() private waveSuferRef: any
  @Prop(String) private flagId!: '' // 区分audio的id的标志
  @Prop(String) private srcUrl!: '' // audio地址
  @Prop({ default: () => false }) private showListen!: boolean // 是否展示下载按钮
  @Prop({ default: () => false }) private showDowload!: boolean // 是否展示下载按钮
  @Prop({ default: () => false }) private isAutoPlay!: boolean // 是否要自动播放 (默认是自动播放)

  private pauseAudioChange (curr: string) {
    if (curr === 'close') {
      this.waveSuferRef.pauseAudio()
    } else {
      this.waveSuferRef.playOrPause()
    }
  }
}
</script>
<style lang="stylus" scoped>
  .vertical
    align-items center
    padding 20px

</style>
